<template>
    <div>
        <el-dialog
                :title='title'
                class='c-dialog-fixed'
                :visible.sync='show'
                :append-to-body='inDialog'
                @open='openDialog'
                @close='closeDialog'>
            <div v-loading='loading'>
                <divider title='接口信息'></divider>
                <div style='margin-bottom: 5px'>
                    <el-input
                            placeholder="输入接口关键字"
                            clearable
                            v-model="filterText">
                    </el-input>
                </div>
                <div :style='treeStyle'>
                    <el-tree
                            node-key="node"
                            :show-checkbox=showCheckbox
                            :expand-on-click-node="false"
                            highlight-current
                            default-expand-all
                            :data='data'
                            :props='{label:"title"}'
                            :default-checked-keys="checked"
                            ref='treeList'
                            :filter-node-method="filterNode"
                            @node-click='nodeClick'
                            @check='check'>
				<span class='_tree-node' slot-scope='{node,data}'>
					<span style='font-size:14px'>{{data.title}} <span v-if='showPath'>[{{data.node}}]</span></span>
					<span>
						<slot name='right' :data='data' :node='node'></slot>
					</span>
				</span>
                    </el-tree>
                </div>
            </div>
            <div slot="footer" >
                <el-button type='primary' @click='save(0)' :loading='loading'>保存</el-button>
                <el-button @click="show=false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import api from "@/api/admin/auth";

  export default {
    props: {
      children: "children_",
      label: "labewwwl",
      showCheckbox: {
        // type: Boolean,
        default: true
      },
      showPath: {
        type: Boolean,
        default: false
      },
      height: {
        type: String,
        default: "auto"
      },
      inDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        filterText: "",
        loading: false,
        data: [],
        resolve: null,
        show: false,
        title: "接口授权",
        // form:{ ...formInit },
        rules: {
          title: [{required: true, message: "请填写菜单名称"}],
          path: [{required: true, message: "请填写菜单路径"}],
          order: [{type: "number", message: "请输入数字"}]
        },
        checked: [
        ],
        initParams: {action: "gets"},
        requestParams: {
          action: "gets"
        },
        init: true
      };
    },
    mounted() {
      if (this.init) {
        this.inited = false;
      }
    },
    computed: {
      treeStyle() {
        if (this.height === "auto") {
          return {};
        } else {
          return {
            height: this.height,
            paddingRight: "15px",
            overflow: "auto"
          };
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.treeList.filter(val);
      }
    },
    methods: {
      openDialog() {
        this.$nextTick(() => {
          if (this.resolve) {
            this.resolve(this);
          }
        });
      },
      open() {
        this.show = true;
        return new Promise((resolve, reject) => {
          this.resolve = resolve;
        });
      },
       save(){
        let data = {
          id:this.initParams.id,
          action:'save',
          nodes:this.getCheckedKeys()
        }
        console.log(data);
         api.apply(data)
           .then(res => {
             this.$message.success(res.msg)
             this.loading = false;

           });
       },
      getTreeList() {
        this.loading = true;
        api
          .getTree({...this.requestParams, ...this.initParams})
          .then(res => {
            this.data = res.data.tree;
            this.checked = res.data.auth;
            this.loading = false;
          });
      },
      initData(params = {}) {
        this.initParams = {...params};
        this.getTreeList();
      },
      filter(value) {
        this.filterText = value;
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
      },
      nodeClick(data, node, component) {
        // console.log(node.data)
        this.$emit("node-click", data, node, component);
      },
      check(a, b, c) {
        // console.log(a)
      },
      clear() {
        this.data = [];
      },
      reload() {
        this.getTreeList();
      },

      closeDialog() {
      },


      getCheckedKeys(leafOnly = false) {
        return this.$refs.treeList.getCheckedKeys(leafOnly);
      },
      setCheckedKeys(keys, leafOnly) {
        return this.$refs.treeList.setCheckedKeys(keys, leafOnly);
      }
    }
  };
</script>
<style lang='less'>
    ._tree-node {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
    }
</style>
